import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:ywn_app/moudle/entity/Images.dart';

class CustomSwiper extends StatelessWidget {

  final List<Images> images;
  const CustomSwiper({Key key, @required this.images}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Theme.of(context).primaryColor,
      child: Stack(
        children: <Widget>[
          Positioned(
              height: MediaQuery.of(context).size.width / 8,
              bottom: 0,
              width: MediaQuery.of(context).size
                  .width,
              child: Container(
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(12),
                          topRight: Radius.circular(12))))),
              Container(
              padding: EdgeInsets.only(left: 12, right: 12),
              width: MediaQuery.of(context).size.width,
              height:  MediaQuery.of(context).size.width/2,
              child: images.length<=0?_buildProgressIndicator(context):ClipRRect(
                borderRadius: BorderRadius.circular(5),
                child: Swiper(
                  onIndexChanged: (i){
                  },
                  duration: 2000,
                  autoplayDelay: 5000,
                  curve: Curves.fastOutSlowIn,
                  itemBuilder: (BuildContext context, int index) {
                    return Container(
                        alignment: Alignment.bottomLeft,
                        decoration: BoxDecoration(
                            image: DecorationImage(
                              image: NetworkImage(images[index].imagesUrl),
                              fit: BoxFit.cover,
                            )),
                        child: Container(
                          padding: EdgeInsets.only(left: 10),
                          alignment: Alignment.centerLeft,
                          width: MediaQuery.of(context).size.width,
                          decoration: BoxDecoration(
                              gradient: LinearGradient(
                                  begin: Alignment.bottomCenter,
                                  end: Alignment.topCenter,
                                  colors: [
                                    Colors.black,
                                    Colors.black54,
                                    Colors.transparent
                                  ])),
                          height: 40,
                          child: Text(
                            images[index].title,
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 18,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ));
                  },
                  loop: images.length>0?true:false,
                  itemCount: images.length,
                  pagination: buildSwiperPagination(context),
                  autoplay: true,
                ),
              ),
          ),
        ],
      ),
    );
  }

  buildSwiperPagination(BuildContext context) {
    return SwiperPagination(
      alignment: Alignment.bottomRight, // 位置 Alignment.bottomCenter 底部中间
      margin: const EdgeInsets.only(right: 5, bottom: 5),
      builder: FractionPaginationBuilder(
          fontSize: 15,
          activeFontSize: 20,
          color: Colors.white,
          activeColor: Theme.of(context).primaryColor),
    );
  }

  Widget _buildProgressIndicator(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(5),
        color: Colors.grey[200],
      ),
      alignment: Alignment.center,
      child: CircularProgressIndicator(backgroundColor: Theme.of(context).primaryColor,),
    );
  }
}

